<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="../jquery.js"></script>
	<body>
		<script type="text/javascript">
			// 发送ajax
			// $.ajax({
			// 	type:"GET",
			// 	url:'./data1.json',
			// 	success:function(res){    //res就是response  result
			// 		console.log(res)
			// 		const {id} = res;   //对象解析 可以直接去res对象里面的id
					
			// 		// 要用这个id请求下面的接口 就会要一直
			// 		// $.ajax({}).....   //这样就形成了回调地狱
			// 	}
			// })
			
			// 解决回掉地狱
			
			// new Promise((resolve,reject) => {
			// 	$.ajax({
			// 		type:"GET",
			// 		url:'./data1.json',
			// 		success:function(res){    
			// 			resolve(res);  //修改promise的状态为成功
			// 		},
			// 		error:function(err){
			// 			reject(err);  //修改promise的状态为失败
			// 		}
			// 	})
			// }).then((data) => {
			//    const {id} = data;    //对象解析 可以直接拿到id
			//    // 这里return 可以被下一个then接收
			//    return new Promise((resolve,reject) => {
				   
			//    })
			// })
			
			
			// 封装一个ajax函数
			function getData(url,data = {},){
				return new Promise((resolve,reject) => {
					$.ajax({
						type:"GET",
						url:url,
						data:data,
						success:function(res){   
							resolve(res);  //修改promise的状态为成功
						},
						error:function(err){
							reject(err);  //修改promise的状态为失败
						}
					})			   
				})
			}
			
			// 直接调用  这样调用就减少了很多代码 可以直接调用   promise他要一直then下去
			// getData('./data1.json').then((data) => {
			// 	const {id} = data;  //对象解析
			// 	// 下一个函数回调需要return
			// 	return getData('data2.json',{id})
			// }).then((data) => {
			// 	const {name} = data;
			// 	return getData('data2.json',{name})
			// })
			
			
			// 还可以这样调用   async/await的优势在于 then链   async返回的是一个promise对象  await是要接收到一个promise对象后在执行
			
			async function test() {
				// 但有多个链的时候 可以这样调用 一直下去
				const n = await getData('./data1.json');
				// const y = await getData('./data2.json'); 
				console.log(n)
			}
			test()
		</script>
	</body>
</html>
